<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
</head>

<body>

<div class="page-loading">
    <div class="rubik-loader"></div>
</div>

<div class="z-body animated fadeIn">
    <!--用户多条件查询条件form表单-->
    <form class="layui-form zadmin-search-area input">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="username" class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" autocomplete="off"
                           id="username" class="layui-input">
                </div>

                <label for="email" class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" autocomplete="off"
                           id="email" class="layui-input">
                </div>

                <!--部门树创建-->
                <label for="deptTree" class="layui-form-label">部门</label>
                <div class="layui-input-inline">
                    <ul id="deptTree" class="dtree" data-id="0" data-value="请选择"></ul>
                    <input type="hidden" id="deptId" name="deptId">
                </div>

                <label for="status" class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status" id="status">
                        <option value="">请选择</option>
                        <option value="1">正常</option>
                        <option value="0">锁定</option>
                    </select>
                </div>

                <button lay-submit="" lay-filter="search" class="layui-btn layui-btn-sm layui-btn-primary table-action">
                    <i class="zadmin-icon zadmin-icon-search" title="查找"> 查找</i>
                </button>
            </div>
        </div>
    </form>
    <!--用户数据显示主表格user-table-->
    <table class="layui-hide" id="user-table"></table>
</div>

<script type="text/html" id="toolbar">
    <!--hashPermission:如果当前Subject有权限将显示body体内容，自带标签，用户新增权限控制-->
    <shiro:hasPermission name="user:add">
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">
            <i class="zadmin-icon zadmin-icon-xinzeng zadmin-oper-area" title="新增"> 新增</i>
        </button>
    </shiro:hasPermission>
</script>

<script type="text/html" id="column-toolbar">
    <!--shiro自带标签，用户更新权限控制-->
    <shiro:hasPermission name="user:update">
        <a lay-event="edit">
            <i class="zadmin-icon zadmin-icon-edit-square zadmin-oper-area zadmin-blue" title="编辑"></i>
        </a>
    </shiro:hasPermission>

    <!--shiro自带标签，用户删除权限控制-->
    <shiro:hasPermission name="user:delete">
        <a lay-event="del">
            <i class="zadmin-icon zadmin-icon-delete zadmin-oper-area zadmin-red" title="删除"></i>
        </a>
    </shiro:hasPermission>

    <!--lacksPermission:如果当前Subject没有权限将显示body体内容-->
    <shiro:lacksPermission name="user:update,user:delete">
        <i class="zadmin-icon zadmin-icon-wuquanxian zadmin-oper-area zadmin-red"> 无权限</i>
    </shiro:lacksPermission>
</script>

<script type="text/html" id="statusTpl">
    <!-- 不能禁用自己 -->
    {{#  if('
    <shiro:principal property="username"/>' == d.username) { }}
    <input type="checkbox" disabled name="status" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定"
           lay-filter="status" {{ d.status== '1' ? 'checked' : '' }}>
    {{#  } }}

    {{#  if('
    <shiro:principal property="username"/>' !== d.username) { }}
    <input type="checkbox" name="status" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定" lay-filter="status" {{
           d.status== '1' ? 'checked' : '' }}>
    {{#  } }}
</script>

<script th:src="@{/lib/jquery/jquery.min.js}"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/js/common.js}"></script>

<script>
    layui.config({
        base: '/lib/layui/extend/'
    }).use(['table', 'element', 'form', 'dtree'], function () {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var dtree = layui.dtree;

        // 部门树创建
        dtree.renderSelect({
            elem: "#deptTree",
            url: "/dept/tree",
            success: function (data, obj, first) {
                console.log(data);
                console.log(obj);
                console.log(first);
            },
            //使用layui风格的数据格式
            //layui风格数据格式中，code和msg是独立的，code的默认值是0。data中的数据是有子集关系的，即下级数据存储在children中。
            dataStyle: "layuiStyle",
            width: "100%",
            method: "GET",//HTTP请求为 GET提交方式
            dot: false,
            menubar: true,
            response: {//修改response中返回数据的定义
                statusName: "status",
                statusCode: 0,
                message: "message",
                rootName: "data",
                treeId: "deptId",
                parentId: "parentId",
                title: "deptName",
                childName: "children"
            }
        });

        dtree.on("node('deptTree')", function (obj) {
            var typeDom = layui.$('#deptId');
            console.log(typeDom.val(), obj.param.nodeId);
            console.log(typeDom.val() === obj.param.nodeId);
            if (typeDom.val() === obj.param.nodeId) {
                typeDom.val('');
                layui.$("input[dtree-id='deptTree']").val('请选择');
            } else {
                typeDom.val(obj.param.nodeId)
            }
        });

        //获取所有用户列表并分页
        table.render({
            elem: '#user-table'
            , url: '/user/list'//对应controller url地址
            , page: true//开启分页，layui默认传的是page和limit
            , parseData: function (res) { //res 即为原始返回的数据
                console.log("#user-table获取所有用户列表并分页")
                console.log(res)
                console.log(res.status)
                console.log(res.message)
                console.log(res.data.total)
                console.log(res.data.records)
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            , toolbar: '#toolbar'//工具条
            , cols: [
                [
                    {
                        type: 'numbers',
                        title: '序号',
                        style: 'background-color: #dd5044; color: #fff;font-size:14px; font-weight: bold;',
                        align: 'center',
                        width: "5%"
                    }
                    , {field: 'userId', title: 'ID', align: 'center', width: "10%", hide: true}
                    , {field: 'username', title: '用户名', align: 'center', font: 'bold', width: "15%"}
                    , {field: 'deptName', title: '部门', align: 'center', width: "12%"}
                    , {field: 'email', title: '邮箱', align: 'center', width: "12%"}
                    , {field: 'createTime', title: '创建时间', align: 'center', width: "12%"}
                    , {field: 'lastLoginTime', title: '最后登陆时间', align: 'center', width: "12%"}
                    , {field: 'status', title: '状态', templet: "#statusTpl", align: 'center', width: "12%"}
                    , {title: '操作', fixed: 'right', align: 'center', toolbar: '#column-toolbar'}
                ]
            ]
        });

        // 账号状态(正常/锁定)点击事件
        form.on('switch(status)', function (data) {
            console.log("账号状态(正常/锁定)点击事件")
            console.log(data)
            console.log(data.value)//userId
            console.log(data.elem.checked)

            if (data.elem.checked) {
                $.post('/user/' + data.value + '/enable', function (data) {
                    handlerResult(data, enableDone);
                });
            } else {
                $.post('/user/' + data.value + '/disable', function (data) {
                    handlerResult(data, disableDone);
                });
            }
        });

        function enableDone(data) {
            parent.layer.msg("激活成功", {icon: 6});
        }

        function disableDone(data) {
            parent.layer.msg("禁用成功", {icon: 6});
        }

        // 工具条点击事件
        table.on('toolbar', function (obj) {
            var data = obj.data;
            var event = obj.event;

            if (event === 'add') {
                add();
            }
        });

        // 行点击事件 重置密码
        table.on('tool', function (obj) {
            var data = obj.data;
            var event = obj.event;

            if (event === 'edit') {
                edit(data.userId);
            } else if (event === 'reset') {
                layer.open({
                    content: '/user/' + data.userId + "/reset",
                    title: "重置密码",
                    area: ['500px', '200px'],
                    type: 2,
                    maxmin: true,
                    shadeClose: true,
                    end: function () {
                        table.reload('user-table');
                    }
                });
            } else if (event === 'del') {
                del(obj);
            }
        });

        //table表格新增一行数据
        function add() {
            layer.open({
                content: "/user",
                title: "新增用户",
                area: ['40%', '85%'],
                type: 2,
                maxmin: true,
                shadeClose: true,
                end: function () {
                    table.reload('user-table');
                },
            });
        }

        //table表格编辑某一行
        function edit(id) {
            layer.open({
                content: '/user/' + id,
                title: "编辑",
                area: ['40%', '85%'],
                type: 2,
                maxmin: true,
                shadeClose: true,
                end: function () {
                    table.reload('user-table');
                }
            });
        }

        //table表格删除某一行
        function del(obj) {
            layer.confirm("确定删除用户吗?", {icon: 3, title: '提示'},
                function (index) {//确定回调
                    var id = obj.data.userId;
                    $.post('/user/' + id, {_method: "DELETE"}, function (data) {
                        layer.close(index);
                        handlerResult(data, deleteDone);
                    });
                }, function (index) {//取消回调
                    layer.close(index);
                }
            );
        }

        function deleteDone(data) {
            parent.layer.msg("删除成功", {icon: 6});
            table.reload('user-table');
        }

        //from表单查找按钮点击事件 监听提交
        form.on('submit(search)', function (form) {
            table.reload('user-table', {
                where: form.field
            });
            return false;
        });

    });
</script>
</body>

</html>